<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				$(".show").click(function(){
					$("div").show()
				})
				$(".hide").click(function(){
					$("div").hide()
				})
				$(".toggle").click(function(){
					$("div").toggle()
				})
				
				
				
				$(".slideDown").mouseover(function(){
					$("div").stop().slideDown(3000)
				})
				$(".slideUp").click(function(){
					$("div").slideUp()
				})
				$(".slideToggle").click(function(){
					$("div").slideToggle()
				})
				
				
				$(".fadeIn").click(function(){
					$("div").fadeIn()
				})
				$(".fadeToggle").click(function(){
					$("div").fadeToggle()
				})
				$(".fadeTo").click(function(){
					//时间 透明度
					$("div").fadeTo(1000,0.5)
				})
				
				$(".animate").click(function(){
					$("div").animate({
						width: "500px",
						height: "+=50px"	
					},1000)
				})
				
			})
		</script>
	</head>
	<body>
		<!-- display:none -->
		<button class="show">show</button>
		<button class="hide">hide</button>
		<button class="toggle">toggle</button>
		<br />
		<!-- height -->
		<button class="slideDown">sildeDown</button>
		<button class="slideUp">sildeUp</button>
		<button class="slideToggle">sildeToggle</button>
		
		<br />
		<!-- opacity -->
		<!-- opacity rgba -->
		<button class="fadeIn">fadeIn</button>
		<button class="fadeToggle">fadeToggle</button>
		<button class="fadeTo">fadeTo</button>
		<br />
		<button class="animate">animate</button>
		<div style="width: 100px;height: 100px;background-color: pink;">	
		</div>
	</body>
</html>
